<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/chineseHospital/appointment.css" />
		<script src="../../js/statistics.js"></script>
		<style>
			.header a{
				color:#fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">预约记录</h1>
		</header>
		<div class="body mui-content mui-scroll-wrapper" id="refreshContainer">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron">
					<div class="no-record" style="display: none;">暂无预约记录</div>
				</ul>
			</div>
			
		</div>
		<script src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src='../../plugins/template/template.js'></script>
		<script type="text/javascript" src="../../js/md5.js" ></script>
		<script src='../../plugins/fontset/fontset.js'></script>
		<script type="text/html" id="list">
			{{if data.length == 0}}
			<div class="no-record">暂无预约记录</div>
			
			{{else}}
			{{each data as value index}}
			<li class="mui-table-view-cell" data-id="{{value.id}}">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red">删除</a>
				</div>
				<div class="mui-slider-handle">
					<p class="up">
						<span>{{value.date}}</span>
						{{if value.status == 0}}
						<span class="lot">预约成功</span>
						{{else}}
						<span>预约取消</span>
						{{/if}}
					</p>
					<p class="down">
						<span>{{value.firstoffice}} - {{value.secondoffice}}</span>
						{{if value.czc}}
						<span>{{value.doctor}} / {{value.czc}}</span>
						{{else}}
						<span>{{value.doctor}}</span>
						{{/if}}
					</p>
				</div>
			</li>
			{{/each}}
			{{/if}}
		</script>
		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function(){
				myAjax('home/Hospital_service/orderList','get',{'uid':plus.storage.getItem('cg_user_id')},function(data){
					console.log(JSON.stringify(data))
					if(data.code == 1){
						initList(data.data)
					}
					
				});
				mui(".body").on('tap','.mui-btn-red',function(){
					var _this = $(this).parents('li');
					var id = $(this).parents('li').attr('data-id');
					myAjax('home/Hospital_service/delete','post',{'id':id},function(data){
						if(data.code == 1){
							mui.toast('删除成功!');
							_this.remove();
							if($(".body").find('li').length == 0){
								$(".no-record").show();
							}
						}
					})
				});
				mui(".body").on('tap','li',function(){
					var id = $(this).attr('data-id');
					mui.openWindow({
						url:'appointment_detail.html',
						id:'appointment_detail.html',
						extras:{
							appointmentId:id
						}
					})
				});
				window.addEventListener('refresh',function(){
					plus.webview.currentWebview().reload();
				})
			});
			function initList(data){
				var list = {
					data:data
				};
				var html = template('list',list);
				$(".body ul").html(html);
			}
		</script>
	</body>
</html>